<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id=    "demo">
        <input type="text" v-model='name' placeholder="hello">
        <p>名字:{{ name }}</p>
        <!--使用label方式要将ID和for设定一样的值使用才能绑定成功-->
        <div>----------------------</div><br><br>
        <!--单个复选框，绑定到布尔值-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <div>---------------------</div><br><br>
        <!--多个复选框，绑定到同一个数组-->
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <div>-------------------------------</div><br><br>
        <!--单选按钮-->
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
        <div>--------------------</div><br><br>
        <!--单选时-->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          <span>Selected: {{ selected }}</span>
          <div>--------------------</div><br><br>
        <!--多选时 绑定到数组-->
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
          </select>
          <br>
          <span>Selected: {{ selected }}</span>
    </div>
    <script>
        new Vue({
            el:'#demo',
            data:{
                name:'',
                checked:true,
                checkedNames:[],
                picked:'',
                selected:'',
                selected:[],
                
            },
            mounted(){
                if(this.checked){

                }else{

                }
            }
        })
    </script>
</body>
</html>